<!DOCTYPE html>
<html>
<head>
	<title>聊天室</title>
	<script type="text/javascript" src="/socket.io/socket.io.js"></script>
	<script type="text/javascript" src="/javascripts/jquery.min.js"></script>
	<style type="text/css">
		.chatList {
			padding-bottom: 50px;
		}
		.chat {
			padding: 20px;
		}
		.chat-content {
			padding-bottom: 10px;
		}
		.chat-username {
			float: left;
		}
		.chat-date {
			float: right;
		}

		.emitChat {
			padding: 20px;
			border-top: 1px dotted red;
		}
		.emitChat textarea {
			display: block;
			width: 100%;
			height: 100px;
			background-color: transparent;
			border: 1px solid #8c96a8;
			border-radius: 4px;
			box-sizing: border-box;
			color: #8c96a8;
			padding: 10px;
			margin-bottom: 10px;
		}
		.emitChat button {
			width: 100px;
			height: 40px;
			line-height: 40px;
			border: none;
			border-radius: 4px;
			background-color: #19b6d6;
			color: #fff;
		}
	</style>
</head>
<body>
	<div class="chatList">
		<!-- <div class="chat">
			<div class="chat-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
			<span class="chat-username">用户名：Joyce</span>
			<span class="chat-date">发言时间：xxxxxxxxxxxx</span>
		</div>
		<div class="chat">
			<div class="chat-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
			<span class="chat-username">用户名：Joyce</span>
			<span class="chat-date">发言时间：xxxxxxxxxxxx</span>
		</div> -->
	</div>

	<div class="emitChat">
		<textarea id="chat"></textarea>
		<button type="button" onclick="emitChat()">提交</button>
	</div>

	<script type="text/javascript">
		var socket = io.connect();
		socket.on('newsay', function(res){
			$('.chatList').append(`
				<div class="chat">
					<div class="chat-content">${res.data}</div>
					<span class="chat-username">用户名：${res.username}</span>
					<span class="chat-date">发言时间：${res.date}</span>
				</div>
			`)
		})

		function emitChat(){
			var chat = $('#chat').val();
			if(!chat){
				alert('发言不能为空');
			} else {
				socket.emit('say', chat);
			}
		}
	</script>
</body>
</html>